<template>
    <div class="requestWrapper">
        <div class="header">申请添加朋友</div>
        <div class="content">
            <div class="contentItem">
                <label>申请添加朋友</label>
                <Input v-model:value="formState.requestMessage" />
            </div>
            <div class="contentItem">
                <label>备注</label>
                <Input v-model:value="formState.remark" />
            </div>
        </div>
        <div class="footer">
            <Button class="confirm" @click="confirmHandler">确定</Button>
            <Button class="cancel" @click="cancelHandler">取消</Button>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { Input, Button, message} from 'ant-design-vue';
import { addFriendsUser } from '@/lib/api'
import { closeFriendsRequestWin } from '@/utils/Electron'
import pubsub from 'pubsub-js'
import { useRoute } from 'vue-router';
import useAuthStore from '@/stores/authStore';
const route = useRoute()
const userInfo = useAuthStore().userInfo
const formState = ref({
    requesterId: 0, // 申请id
    requestMessage: '', //
    remark: '' // 自己对该好友的备注
})
const cancelHandler = () => {
    closeFriendsRequestWin()
}
const confirmHandler = () => {
    const param = {
        requesterId: formState.value.requesterId,
        requestMessage: formState.value.requestMessage,
        remark: formState.value.remark
    }
    addFriendsUser(param).then((res: any)=> {
        if(res.code === 0) {
            message.open({content: res.msg, type: 'success'})
            setTimeout(()=> {
                closeFriendsRequestWin()
            }, 2000)
        }
    })
}
onMounted(() => {
  pubsub.subscribe('add-friends', (event: string, msg: any)=> {
    formState.value = {
      requesterId: msg.requestId,
      requestMessage: userInfo.userName + '请求添加你为朋友',
      remark: msg.remark
    }
  })
})
</script>
<style lang="less" scoped>
.requestWrapper{
    height: 100%;
    background-color: #efefef;
    /* padding: 20px; */
    display: flex;
    flex-direction: column;
    -webkit-app-region: no-drag;
    .header {
        height: 45px;
        line-height: 45px;
        font-size: 12.5px;
        text-align: center;
        border-bottom: 1px solid #e0e0e0;
        -webkit-app-region: drag;
    }
    .content {
        flex: 1;
        padding: 5px 25px;
        .contentItem {
            margin-bottom: 10px;
            label {
                font-size: 12px;
                color: #a2a2a2;
                display: inline-block;
                margin-bottom: 7px;
            }
        }
    }
    .footer {
        height: 80px;
        border-top: 1px solid #e0e0e0;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        button {
            width: 100px;
        }
        .confirm {
            background-color: #0fb75f;
            color: white;
        }
        .cancel {
            color: #0fb75f;
        }
        
    }
}
</style>